<template>
    <el-form-item label="频道" prop="channelId">
        <!--this.channelId是用来获取要抛出的值 @change相当于触发自定定义事件向父组件抛值 -->
    <el-select v-model="channelId" placeholder="请选择频道" @change="hChange">
      <el-option
      v-for="chanels in channelList"
      :label="chanels.name"
      :value="chanels.id"
      :key="chanels.id"
      >
      </el-option>
      </el-select>
      {{value}}
  </el-form-item>
</template>

<script>
export default {
  name: 'Channel',
  props: ['value'],
  data () {
    return {
      channelId: null,
      channelList: []
    }
  },
  created () {
    this.loadChannels()
  },
  methods: {
    hChange () {
      // 当前选中的值
      this.$emit('input', this.channelId)
    },
    async loadChannels () {
      // 取回频道数据
      const result = await this.$http({
        method: 'GET',
        url: '/mp/v1_0/channels'
      })
      console.log('频道数据', result)
      this.channelList = result.data.data.channels
    }
  }
}
</script>

<style>

</style>
